<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <img src="@/assets/imgs/flight/img.png" style="width:1130px;" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="text-align: left;">
          <el-select v-model="selected" placeholder="航班类型(国内/国际)" style="width:200px; margin-top:5px;">
            <el-option label="国内航班" value="2403"></el-option>
            <el-option label="国际航班" value="2401"></el-option>
          </el-select>
          <el-button type="primary" class="search-btn" @click="fetchData" style="margin-left:20px;">确认</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="tableBar" style="margin-top:10px;">
      <el-input v-model="input1" placeholder="请输入始发站" disabled="disabled" style="width: 200px;">
        <i class="el-input__icon el-icon-search" style="cursor: pointer" @click="fetchData"></i>
      </el-input>
      <el-input v-model="input2" placeholder="请输入终点站" style="width: 200px; margin-left:10px;">
        <i class="el-input__icon el-icon-search" style="cursor: pointer" @click="fetchData"></i>
      </el-input>
      <el-date-picker v-model="orderTime"
        clearable 
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        placeholder="选择日期"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        style="width: 400px; margin-left:10px;"
      ></el-date-picker>
      <el-button type="primary" class="search-btn" @click="fetchData" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table :data="tableData" stripe class="tableBox">
      <el-table-column prop="flid" label="航班ID" align="center"></el-table-column>
      <el-table-column prop="ffid" label="航班标识" align="center"></el-table-column>
      <el-table-column prop="cfno" label="航班号" align="center"></el-table-column>
      <el-table-column prop="startapcd" label="始发站" align="center"></el-table-column>
      <el-table-column prop="startfptt" label="预计起飞时间" align="center"></el-table-column>
      <el-table-column prop="endapcd" label="终点站" align="center"></el-table-column>
      <el-table-column prop="endfplt" label="预计到达日期" align="center"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template #default="scope">
          <el-button type="info" plain size="small" @click="confirmTicket(scope.row)">购票</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pageList"
      :page-sizes="[8, 16, 24, 32]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page.sync="currentPage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          &nbsp;
        </div>
      </el-col>
    </el-row>
    <el-row>
      <span style="font-size:20px;">游中国</span>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <img src="@/assets/imgs/flight/bottom3.png" style="width:1140px;" />
        </div>
      </el-col>
    </el-row>
    <br><br><br><br><br>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import request from '@/utils/request';
import { ElMessageBox } from 'element-plus'; // 导入 ElMessageBox 组件
import { ElMessage } from 'element-plus';
const selected = ref('2403');
const input1 = ref('天津');
const input2 = ref('');
const orderTime = ref('');
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);


const fetchData = () => {
  request({
    url: '/fquery/outmain',
    method: 'GET',
    params: {
      page: currentPage.value,
      pageSize: pageSize.value,
      startapcd: input1.value, // 使用ref变量的值
      endapcd: input2.value,
      startfptt: orderTime.value ? orderTime.value[0] : '', // 处理日期范围
      endfplt: orderTime.value ? orderTime.value[1] : '',
      endapat: selected.value,
    }
  }).then(res => {
    if (res.data.errorCode == 200) {
      tableData.value = res.data.data.records; // 使用ref变量的值
      total.value = res.data.data.total; // 使用ref变量的值
    }
  }).catch(error => {
    console.error('Error fetching data:', error);
  });
};
const confirmTicket = (row) => {
  // 购票确认弹窗
  ElMessageBox.confirm('确认购买此航班的机票吗？', '购票确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 用户点击确认后的处理逻辑
    // 调用购票方法，并传递相应参数
    purchaseTicket(row);
  }).catch(() => {
    // 用户点击取消后的处理逻辑
  });
};

const purchaseTicket = (row) => {
  // 调用后端接口购买机票
  request({
    url: '/fquery/tickets/buy',
    method: 'POST',
    data: {
      cfno: row.cfno,
      startapcd: row.startapcd,
      startfptt: row.startfptt,
      endapcd: row.endapcd,
      endfplt: row.endfplt,
    },
  }).then((res) => {
    if (res.data.errorCode == 200) {
      // 购票成功的处理逻辑
      ElMessage.success('购票成功！');
      // 刷新页面或重新获取数据等操作
    } else {
      // 购票失败的处理逻辑
      ElMessage.error('购票失败，请重试！');
    }
  }).catch((error) => {
    console.error('Error purchasing ticket:', error);
    ElMessage.error('购票失败，请重试！');
  });
};
const handleSizeChange = (val) => {
  pageSize.value = val; // 使用ref变量的值
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val; // 使用ref变量的值
  fetchData();
};

const addMemberHandle = (row) => {
  // 处理行数据的操作
};
 fetchData();
</script>

<style scoped>
.container {
  max-height: 100vh;
  overflow-y: auto;
}
.tableBar {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>
